相关通用属性（不兼容的就不用了）
关于事件属性
Event.screenX, Event.screenY
相对于屏幕左上角的x,y坐标值，所有的鼠标事件都有定义
Event.clientX,Event.clientY
相对于客户端左上角的x,y坐标值（不考虑滚动条），所有的鼠标事件都有定义
Event.Touch
- screenX，screenY 相对于屏幕左上角的坐标
- clientX，clientY 相对于视口的坐标（不搞包含滚动距离）
- pageX，pageY 相对于视口的坐标（包含滚动距离）
TouchEvent
- touches 每一个接触点的事件信息
- targetTouches 当前事件目标节点上触发的接触点的事件信息
- changedTouches
关于DOM位置
Element.clientWidth,Element.clientHeight
- 如果当前元素是根元素，表达的是不包含滚动条的视窗宽高
- 非根元素，表达的是不包含滚动条的元素内容宽高+
Padding值，也就是Padding边界的宽高值
Element.clientTop,Element.clientLeft
- 左边（或上边）的
Border边到Padding边间的距离，一般就是Border的值(没有滚动条)，有滚动条的话要算滚动条的宽度
Element.offsetWidth,Element.offsetHeight
- 包含
Padding和Border，但不包含Margin的宽高值，也就是Border边界的宽高值
Element.offsetTop,Element.offsetLeft
Border左上角相对于offsetParent的值- 一般
offsetParent为body元素，有动态定位容器offsetParent就是这个定位的容器，如果在table内，这个offsetParent就是table
Element.scrollWidth,Element.scrollHeight
- 元素整体的宽高尺寸，没有滚动条的话对应等于
offsetWidth,offsetHeight的值，有滚动条的话就是整个内容区域的宽高（要加上可滚动的距离）
Element.scrollTop,Element.scrollLeft
- 滚动了的距离
Element.getBoundingClientRect()
- 包含
Border和Padding，不包含Margin - 返回元素
top,left,right,bottom,width,height等属性，表达左上角和右下角的x,y的坐标值及尺寸 - 元素框的位置，不包含滚动条，要滚动条还需要进一步计算
- 返回的结果不是实时的只是一个当时的静态快照
Element.getClientRects()
- 内联元素的每一个矩形框
Document.elementFromPoint()
- 传递
x，y坐标来获取指定视口坐标上是什么元素
Node.contains()
- 判断某个节点是否包含某个其他节点，或者说某个其他节点是否是某个节点的后代
Window.getComputedStyle()
- 获取样式尺寸，计算过的像素尺寸
最后更新： 2022年03月02日 03:32
原始链接： http://rawbin-.github.io/dev-app/2018-10-19-dom-position/
